<template>
    <div>
      <div class="side_bar">
        <div class="s_topic">教师后台管理系统</div>
        <ul class="s_c_tent">
           <li class="s_content" @click="showCCV()">课程管理</li>
           <li class="s_content" @click="showCSV()">课程资料</li>
           <li class="s_content" @click="showHHV()">在线作业</li>
           <li class="s_content" @click="showTCV()">在线考试</li>
        </ul>
      </div>
      <div class="nav_bar">
        <p class="right_user">
            <a href="javascript:;">
              <img class="user_photo" src="../assets/imgs/user_photo.png">
            </a>
            <a href="javascript:;">
              <span class="user_name">xxx</span>
            </a>
        </p>
      </div>
      <div class="content_bar">
        <div class="bar">
          <CourseControlVue v-if="showCC"></CourseControlVue>
          <CourseSVue v-if="showCS"></CourseSVue>
          <HomeWorkControlVue v-if="showHH"></HomeWorkControlVue>
          <TestControlVue v-if="showTC"></TestControlVue>
          </div>
      </div>
    </div>
</template>

<script>
import CourseControlVue from '../components/CourseControl.vue'
import CourseSVue from '../components/CourseS.vue'
import HomeWorkControlVue from '../components/HomeWorkControl.vue'
import TestControlVue from '../components/TestControl.vue'
export default {
    data(){
      return{
        showCC:true,
        showCS:false,
        showHH:false,
        showTC:false
      }
    },
    methods: {
      showCCV(){
        this.showCC = true
        this.showCS = false
        this.showHH = false
        this.showTC = false
      },
      showCSV(){
        this.showCC = false
        this.showCS = true
        this.showHH = false
        this.showTC = false
      },
      showHHV(){
        this.showCC = false
        this.showCS = false
        this.showHH = true
        this.showTC = false
      },
      showTCV(){
        this.showCC = false
        this.showCS = false
        this.showHH = false
        this.showTC = true
      }
    },
    components:{
        CourseControlVue,
        CourseSVue,
        HomeWorkControlVue,
        TestControlVue
    }
}
</script>

<style lang="scss" scoped>
 .side_bar{
    float: left;
    width: 20vw;
    min-height: 100vh;
    background-color: #eee;
    .s_topic{
      padding-left: 10px;
      padding-top: 20px;  
      font-size: 28px;
      font-weight: bold;
    }
    .s_c_tent{
       margin-top: 100px;
       padding-left: 10px;
       .s_content{
        width: 85%;
        height: 60px;
        line-height: 60px;
        margin-bottom: 20px;
        font-size: 18px;
        text-align: center;
        border-radius: 8px;
        box-shadow: 10px 10px 5px 5px  #67b3dd ;
        background-color: #fff;
        cursor: pointer;
       }  
    }
 } 
 .nav_bar{
    height: 6vh;
    background-color:#437fc1;
    overflow: auto;
    .right_user{
      width: 80px;
      height: 100%;
      padding-top: 8px;
      float: right;
      .user_photo{
        width: 25px;
        height: 25px;
        border-radius: 12px;
        vertical-align: middle;
      }
      .user_name{
        max-width: 60px;
        height: 24px;
        line-height: 24px;
        vertical-align: middle;
        font-size: 14px;
        margin-left: 6px;
        color: #fff;
      }
    }
 }
 .content_bar{
    min-height: 94vh;
    background-image: linear-gradient(to right, white , #7bb3f8);
    overflow: auto;
    box-sizing: border-box;
    padding: 100px 10px 10px 10px;
    .bar{
      width: 100%;
    }
 } 
</style>